<div class="control" [ngClass]="themeClass">
    <layout-header (childOuter)="themeChenge($event)"></layout-header>
    <div class="controlMain">
        <div nz-row>
            <div nz-col nzSpan="24">
                <div class="contwrap searchWrap">
                    线别：
                    <nz-tree-select [nzDropdownStyle]="treeNodeStyle" [nzAllowClear]="false" style="width: 160px"
                        [nzDropdownMatchSelectWidth]="false" [nzNodes]="lineSelect" nzShowSearch [(ngModel)]="lineId"
                        (ngModelChange)="lineChange($event)">
                    </nz-tree-select>
                    &nbsp;&nbsp;&nbsp;车间：
                    <nz-tree-select [nzDropdownStyle]="treeNodeStyle" [nzAllowClear]="false" style="width: 160px"
                        [nzDropdownMatchSelectWidth]="false" [nzNodes]="workshopSelect" nzShowSearch
                        [(ngModel)]="workshopId" (ngModelChange)="workshopChange($event)">
                    </nz-tree-select>
                    &nbsp;&nbsp;&nbsp;车站：
                    <nz-tree-select [nzDropdownStyle]="treeNodeStyle" [nzAllowClear]="false" style="width: 160px"
                        [nzDropdownMatchSelectWidth]="false" [nzNodes]="stationSelect" nzShowSearch
                        [(ngModel)]="stationId" (ngModelChange)="stationChange($event)" nz-tooltip
                        nzTooltipTitle="请先选择线别或车站后，才能选择车站" nzTooltipPlacement="bottom">
                    </nz-tree-select>
                    &nbsp;&nbsp;&nbsp;设备类型：
                    <nz-tree-select [nzDropdownStyle]="treeNodeStyle" [nzAllowClear]="false" style="width: 160px"
                        [nzDropdownMatchSelectWidth]="false" [nzNodes]="devTypeSelect" nzShowSearch
                        [(ngModel)]="devTypeId" (ngModelChange)="devTypeChange($event)">
                    </nz-tree-select>
                    &nbsp;&nbsp;&nbsp;设备名称：
                    <nz-tree-select [nzDropdownStyle]="treeNodeStyle" [nzAllowClear]="false" style="width: 160px"
                        [nzDropdownMatchSelectWidth]="false" [nzNodes]="devNameSelect" nzShowSearch
                        [(ngModel)]="devNameId" (ngModelChange)="devNameChange($event)" nz-tooltip
                        nzTooltipTitle="请先选择车站和设备类型后，才能选择设备名称" nzTooltipPlacement="bottom">
                    </nz-tree-select>
                    &nbsp;&nbsp;&nbsp;起：
                    <nz-date-picker nzShowTime nzFormat="yyyy-MM-dd HH:mm:ss" [nzAllowClear]="false"
                        [(ngModel)]="startValue">
                    </nz-date-picker>
                    &nbsp;&nbsp;&nbsp;至：
                    <nz-date-picker nzShowTime nzFormat="yyyy-MM-dd HH:mm:ss" [nzAllowClear]="false"
                        [(ngModel)]="endValue">
                    </nz-date-picker>
                    &nbsp;&nbsp;&nbsp;
                    <button nz-button nzType="primary" (click)="alarmSearch('',step)">
                        <i nz-icon nzType="area-chart" nzTheme="outline"></i>统计
                    </button>
                    <button nz-button nzType="primary" (click)="alarmReset()">
                        <i nz-icon nzType="reload" nzTheme="outline"></i>重置
                    </button>
                </div>
            </div>
            <div nz-col nzSpan="24">
                <div class="contwrap p20" style="position:relative;margin:2px 12px 12px 12px;">
                    <div class="title">报警统计</div>
                    <div class="breadcrumb">
                        <nz-breadcrumb nzSeparator=">">
                            <nz-breadcrumb-item>
                                <span class="blue" (click)="breadcrumbClick('all')"><i nz-icon nzType="environment"
                                        nzTheme="outline"></i> 全部</span>
                            </nz-breadcrumb-item>
                            <nz-breadcrumb-item *ngIf="breadcrumb.line">
                                <span class="blue" (click)="breadcrumbClick('line')">{{breadcrumb.line}}</span>
                            </nz-breadcrumb-item>
                            <nz-breadcrumb-item *ngIf="breadcrumb.workshop">
                                <span class="blue" (click)="breadcrumbClick('workshop')">{{breadcrumb.workshop}}</span>
                            </nz-breadcrumb-item>
                            <nz-breadcrumb-item *ngIf="breadcrumb.stationline">
                                <span class="blue"
                                    (click)="breadcrumbClick('stationline')">{{breadcrumb.stationline}}</span>
                            </nz-breadcrumb-item>
                            <nz-breadcrumb-item *ngIf="breadcrumb.stationworkshop">
                                <span class="blue"
                                    (click)="breadcrumbClick('stationworkshop')">{{breadcrumb.stationworkshop}}</span>
                            </nz-breadcrumb-item>
                            <nz-breadcrumb-item *ngIf="breadcrumb.devtype">
                                <span class="blue" (click)="breadcrumbClick('devtype')">{{breadcrumb.devtype}}</span>
                            </nz-breadcrumb-item>
                            <nz-breadcrumb-item *ngIf="breadcrumb.dev">
                                <span class="blue" (click)="breadcrumbClick('dev')">{{breadcrumb.dev}}</span>
                            </nz-breadcrumb-item>
                        </nz-breadcrumb>
                    </div>
                    <div id="baojing" class="chartsWrap" style="width:100%"></div>
                    <div class="timetips" [innerHTML]="timeTips"></div>
                    <div id="shijian" class="chartsWrap" style="width:100%;margin-top:40px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>